<template>
  <div class="wiki-recommend">

    <div class="wiki-recommend-tips"> 
      <el-popover
        placement="top"
        width="200"
        :visible-arrow="true"
        v-model="showTips">
        <span>{{$t('task.tip.wikiRecommendTip')}}</span>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="showTips = false">{{$t('common.base.close')}}</el-button>
        </div>
        <!-- <el-button slot="reference">删除</el-button> -->
      </el-popover>
    </div>

    <el-button
      class="wiki-recommend-btn"
      @click="openDrawer"
      type="primary">
      <i class="iconfont icon-zhishiku_mian"></i>{{$t('common.base.wikiRecommend')}}
    </el-button>
    
    <el-drawer
      :modal="true"
      :title="$t('common.base.wikiRecommend')"
      custom-class="wiki-recommend-drawer"
      :visible.sync="visible"
      append-to-body
      size="420px"
      direction="rtl">
      <div class="wiki-recommend-search">
        <el-input
          @input="searchList"
          :placeholder="t('common.base.search')"
          v-model="keyWordAndContent"
          prefix-icon="el-icon-search"
          clearable>
        </el-input>
      </div>
      <div class="wiki-recommend-list" v-loading="loading">
        <div
          :key="wiki.id"
          v-for="wiki in wikiList"
          @click="toDetail(wiki.id)"
          class="wiki-recommend-item">
          <h3 v-html="labelMark(wiki.title)"></h3>
          <div class="title-label" v-if="wiki.label && wiki.label.length">
            <span
              :key="index"
              v-for="(tag, index) in wiki.label || []">
              {{ tag }}
            </span>
          </div>
          <p v-html="labelMark(wiki.content)"></p>
        </div>
      </div>
      <el-button
        class="list-more"
        @click="toList"
        type="text">
        {{$t('common.base.viewMore')}}
      </el-button>
    </el-drawer>
  </div>
</template>

<script>

import { getDocumentList } from '@src/api/Repository'
import { openTabForWikiView, openTabForWikiList } from '@src/util/business/openTab'

export default {
  name: 'wiki-recommend',
  props: {
    keywords: {
      type: Array,
    },
    fromDetail: {
      type: Boolean
    },
    tips: {
      type: Boolean,
      default: false
    },
    wikiId: {
      type: String
    }
  },
  computed: {
    showTips: {
      get() {
        return this.tips
      },
      set(newValue) {
        this.$emit('update:tips', newValue)
      }
    }
  },
  watch: {
    // keywords() {
    //   },
    visible(newValue) {
      this.$emit(newValue ? 'open' : 'close', '', data => {
        newValue && this.fromDetail && this.getDocumentList(data)
      })
      if (!this.fromDetail) {
        newValue && this.getDocumentList()
      }
    }
  },
  data() {
    return {
      keyWordAndContent: '',

      visible: false,

      wikiList: [],

      loading: false
    }
  },
  mounted() {
    // this.getDocumentList()
  },
  methods: {
    searchList() {
      this.loading = true;
      this.wikiList = [];
      getDocumentList({
        pageNum: 1,
        pageSize: 10,
        keyWordAndContent: this.keyWordAndContent,
        view: 'published',
        flag: true
      }).then(res => {
        if (res.code === 0) {
          this.wikiList = res.result?.list || []
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        this.loading = false
      })
    },
    openDrawer() {
      if(this.wikiId && this.wikiId != -1) {
        // 故障库 存在id直接跳转知识库详情
        openTabForWikiView(this.wikiId)
      } else {
        this.visible = true
      }
    },
    labelMark(text) {
      if(!text) return ''
      return text.replace(/<em>.*?<\/em>/g, (res) => {
        res = res.replace(/<em>|<\/em>/, '')
        return `<span style="color: #FF7B00">${res}</span>`
      })
    },
    getDocumentList(keywords) {
      this.loading = true
      getDocumentList({
        pageNum: 1,
        pageSize: 10,
        keywords: keywords || this.keywords,
        view: 'published',
        flag: true
      }).then(res => {
        if (res.code === 0) {
          this.wikiList = res.result?.list || []
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        this.loading = false
      })
    },
    toList() {
      openTabForWikiList()
    },
    toDetail(id) {
      openTabForWikiView(id)
    }
  }
}
</script>

<style lang="scss" scoped>
  .wiki-recommend {
    position: fixed;
    right: -93px;
    top: calc(50% - 25px);
    transition: 1s right;
    z-index:999;
    ::v-deep .wiki-recommend-btn.el-button {
      width: 143px;
      height: 50px;
      background: transparent !important;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      min-width: auto;
      border: 0;
      padding: 0;
      text-align: left;
      border-radius: 25px;
      transition: 1s background;
      .iconfont {
        font-size: 20px;
        display: inline-block;
        width: 50px;
        height: 50px;
        background: rgba(8, 30, 66, 0.65);
        line-height: 50px;
        border-radius: 50%;
        text-align: center;
        transition: 1s background;
      }
    }
    &:hover {
      right: 0;
      ::v-deep .wiki-recommend-btn.el-button {
        background: rgba(8, 30, 66, 0.65) !important;
        .iconfont {
          background: transparent;
        }
      }
    }
    &-tips {
      position: absolute;
      top: -94px;
      right: 320px;
    }
  }
  .wiki-recommend-search{
    box-sizing: border-box;
    padding: 8px 12px;
    width: 420px;
    background: #fff;
    position: sticky;
    top:0;
  }
</style>

<style lang="scss">
  .wiki-recommend-drawer {
    .el-drawer__header {
      margin-bottom: 0;
    }
    .el-drawer__title {
      text-align: center;
    }
    .el-drawer__body {
      overflow: auto;
    }
    .wiki-recommend-item {
      padding: 16px;
      border-bottom: 1px solid #E5E6E5;
      cursor: pointer;
      h3 {
        font-size: 16px;
        font-weight: 400;
        color: #262626;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        margin-bottom: 0;
        font-size: 13px;
        font-weight: 400;
        color: #8C8C8C;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  .list-more {
    margin: 0 auto;
    display: block;
    cursor: pointer;
  }

  .title-label {
    vertical-align: middle;
    margin-left: 0;
    min-height: 22px;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    span {
      background: $color-primary-light-1;
      border-radius: 4px;
      border: 1px solid $color-primary-light-1;
      height: 22px;
      line-height: 22px;
      font-size: 12px;
      font-weight: 400;
      color: $color-primary-light-6;
      display: inline-block;
      box-sizing: border-box;
      padding: 0 8px;
      vertical-align: text-top;
      margin-left: 0;
    }
    span:not(:first-child) {
      margin-left: 4px
    }
  }
</style>